<template>
  <div>
    <div class="margin-container-list">
      <div class="pad-t-20 pad-b-15" style="font-size: 20px">
        <span>激活码总数:</span>
        <span style="color: red">{{ canShopNumTotal }}张 </span>|
        <span>待使用:</span>
        <span style="color: red">{{ canShopNum }}张 </span>|
        <span>已使用:</span>
        <span style="color: red">{{ canShopNumTotal - canShopNum }}张 </span>
      </div><hr/>
      <div class="tab-style-default">
        <el-tabs v-model="status" @tab-click="handleClick">
          <el-tab-pane :label="'待审核(' + applyName + ')'" name="0"></el-tab-pane>
          <el-tab-pane :label="'已通过(' + adoptName + ')'" name="1"></el-tab-pane>
          <el-tab-pane :label="'未通过(' + refuseName + ')'" name="2"></el-tab-pane>
        </el-tabs>
      </div>
      <div class="top-operate">
        <div>
          <div class="float-l">
            <el-input @keyup.enter.native="handleSearch" v-model="dataListQuery.nickname" placeholder="微客昵称/姓名/手机号/小区名称/提货地址" style="width: 400px"></el-input>
            <el-date-picker v-model="datePicker"
                            type="daterange"
                            unlink-panels
                            range-separator="至"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            :default-time="['00:00:00', '23:59:59']"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间">
            </el-date-picker>
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button plain="" @click="resetSearch">重置</el-button>
          </div>
          <br>
        </div>
      </div>
      <div class="pad-b-15" style="margin-bottom: 5px">
        <el-button type="primary" @click="addCommander">新增团长</el-button>
        <el-button @click="handleBatch(1)" v-if="status == 0">批量通过</el-button>
        <el-button @click="handleBatch(2)" v-if="status == 0">批量拒绝</el-button>
      </div>

      <!-- 内容列表 -->
      <div class="table-container">
        <el-table :data="dataList" @selection-change="handleSelectionChange" v-loading="listLoading"
                  element-loading-text="加载中" style="width: 100%">
          <el-table-column width="55px" type="selection"></el-table-column>
          <el-table-column min-width="240px" label="微客" prop="userInfo">
            <template slot-scope="scope">
              <div class="flex v-align-c cursor-p">
                <label><img :src="scope.row.avatar" class="user-avatar" v-if="scope.row.avatar"></label>
                <div class="font-14 pad-l-10">
                  <div>昵称：{{scope.row.nickname}}</div>
                  <div>姓名：{{scope.row.realname}}</div>
                  <div>手机：{{scope.row.phone}}</div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column min-width="240px" label="提货地址" prop="takeAddress" ></el-table-column>
          <el-table-column min-width="240px" label="申请小区" prop="villageName" ></el-table-column>
          <el-table-column width="240px" label="创建时间" prop="createTime" ></el-table-column>
          <el-table-column width="140px" label="操作"  v-if="status == 0" align="right" fixed="right">
            <template slot-scope="scope">
              <el-button type="text" size="medium" @click="handleUpdate(scope.row, 1)">通过</el-button>
              <el-button type="text" size="medium" @click="handleUpdate(scope.row, 2)">拒绝</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 列表分页 -->
      <div class="pagination">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page="dataListQuery.currentPage"
                       :page-sizes="[10, 20, 50, 100]" :page-size="dataListQuery.size"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total">
        </el-pagination>
      </div>
    </div>

    <!--二维码-->
    <el-dialog title="" :visible.sync="formVisible" :close-on-press-escape="true" width="400px">
      <div class="text-align-c">
        <img :src="picUrl" class="width-260 height-260">
        <p class="font-14">请让需要成为团长的用户用<br />微信“扫一扫”扫描上方二维码</p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { pagingApply, updateBatchByStatus, saveVillageByStatus, countApply } from '@/api/user/villageCommanderApply'
  import { getCommanderCode } from '@/api/user/recruiter'

  export default {
    data() {
      return {
        total: null,
        dataList: [],
        listLoading: false,
        formVisible: false,
        canShopNum: 0,
        canShopNumTotal: 0,
        applyName: '0',
        adoptName: '0',
        refuseName: '0',
        picUrl: '',
        recruiterId: '',
        status: '0',
        dataListQuery: {
          nickname: '',
          enterpriseId: this.getEnterpriseId(),
          startTime: '',
          endTime: '',
          currentPage: 1,
          size: 10
        },
        datePicker: []
      }
    },
    // 初始化页面
    created() {
      this.listLoading = false
      this.initData()
    },
    mounted() {
    },
    methods: {
      handleClick() {
        this.initData()
      },
      addCommander() {
        getCommanderCode(this.recruiterId).then(response => {
          if (response.isError) return
          this.picUrl = response.data.commanderCode
          this.formVisible = true
        })
      },
      handleBatch(status) {
        if (!this.multipleSelection || this.multipleSelection.length <= 0) {
          this.$message.error('请选择需要操作的数据')
          return
        }
        this.$confirm('是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const selections = this.multipleSelection
          let applyIds = ''
          selections.forEach(e => {
            applyIds += e.applyId + ','
          })
          updateBatchByStatus(applyIds.substr(0, applyIds.length - 1), status).then(response => {
            if (response.isError) return
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this.initData()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      initData() {
        // this.applyName = '待审核'
        // this.adoptName = '已通过'
        // this.refuseName = '未通过'
        countApply(this.getEnterpriseId()).then(response => {
          if (response.isError) return
          this.canShopNum = response.data.canShopNum
          this.recruiterId = response.data.recruiterId
          this.canShopNumTotal = response.data.canShopNumTotal
          this.applyName = response.data.applyNum
          this.adoptName = response.data.adoptNum
          this.refuseName = response.data.refuseNum
        })
        this.listLoading = true
        const datePicker = this.datePicker
        if (this.$utils.isExist(datePicker) && datePicker.length > 0) {
          this.dataListQuery.startTime = datePicker[0]
          this.dataListQuery.endTime = datePicker[1]
        } else {
          this.dataListQuery.startTime = ''
          this.dataListQuery.endTime = ''
        }
        this.dataListQuery.status = this.status
        pagingApply(this.dataListQuery).then(response => {
          this.dataList = response.data.records
          this.total = response.data.total
          this.listLoading = false
        })
      },
      resetSearch() {
        this.dataListQuery = {
          nickname: '',
          enterpriseId: this.getEnterpriseId(),
          startTime: '',
          endTime: '',
          currentPage: 1,
          size: 10
        }
        this.datePicker = []
        this.initData()
      },
      // 更改当前页面大小
      handleSizeChange(val) {
        this.dataListQuery.size = val
        this.initData()
      },
      // 更改当前页数
      handleCurrentChange(val) {
        this.dataListQuery.currentPage = val
        this.initData()
      },
      // 勾选
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      // 查询
      handleSearch() {
        this.dataListQuery.currentPage = 1
        this.initData()
      },
      // 编辑
      handleUpdate(row, status) {
        this.$confirm('是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          saveVillageByStatus(row.applyId, status).then(response => {
            if (response.isError) return
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this.initData()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
        // 清除赋值
      }
    }
  }
</script>

<style lang="less" scoped>
  .mission-type {
    padding: 35px 38px;
    min-width: 150px;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    margin: 25px 40px;
    cursor: pointer;
    text-align: center;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
  }
  .flex-cag-box{
    padding: 0px 0px 20px 70px;
    .mission-type:nth-child(4n){
      margin-right: 0px;
    }
  }
  .next-step-btn{
    padding: 13px 35px;
    font-size: 18px;
  }

  .sel-mission-type {
    background-color: #409eff;
    color: #fff;
  }

  .budget-el-select {
    padding-top: 10px;
    padding-left: 50px;
  }

  .user-avatar{
    width: 46px;
    height: 46px;
    display: block;
    border-radius: 50px;
  }
</style>
